Graphics and C++ 


This term you can create programs on UNIX or you can create 
programs using any C++ compiler (on your own computer). 
There is open source software available for free, so you don’t 
have to buy a compiler.... 


For fun we will be demonstrating Graphics 
using PC C++ Compilers 


• In CS161 our focus is on problem solving 
and learning how to apply these 
solutions to a high level programming 
language, like C++ 

• We will also compare this to C and Java 
frequently, other high level languages 

• You can work with graphics, if you want 
to challenge yourself (and have fun), but 
there is no requirement that you do this. 


Some of the Choices 



f\ 


• If you want to work on your own PC with 
a C++ compiler, rather than being logged 
in remotely to the PSU systems 

You have many choices - there are many 
compilers available for free download 

Many provide Integrated Development 
Environments (IDE’s) 

• Which just means they have a graphical front 
end and aren’t just text based when you enter 



your program. 



Some of the Choices 



• Some of your choices are (for free) 

Dev-C++ 

Visual Student C++ Express 2008 

NetBeans 

Eclipse for C++ 

• These all support the basic language 
features 

• But, they are not equal in terms of 

graphics 


computer 



Some of the Choices 



• Here is how they rank... 



Dev-C++ provides a single graphics.h library that 
we use for in-class demos. It is easy to use. 

• It is limited in support and functionality 

• But it is easy to use! 

Visual and NetBeans are environments many 
Computer Science students use, 

• but they more complicated 

Eclipse for C++ requires more advanced OpenGL 
programming, which is beyond the scope of CS161 

• In CS202 ... we will use Eclipse 


What is Dev-Cpp? 



• Dev-C++, developed by Bloodshed Software , is a fully featured 
graphical IDE (Integrated Development Environment), which is 
able to create Windows or console-based C/C++ programs. 


• It is recommended because it is easy to use, doesn’t require 
knowing a lot to get started, and is a great way to create some fun 
programs quickly. 


• It is based on MinGW (Minimalist GNU* * for Windows) which uses 
the same family of compilers that we use on PSU’s unix 
environment ( a GNU g++ compiler collection). 


• Although there are some differences, we don’t need to be too 
concerned with that in CS1 61 . Differences between Cvawin and 
MinGW for more information. 

• Links of interest: http://www.bloodshed.net/devcpp.html 



What does it allow me to do? 



• With an IDE, we can do all of our work on our 
home computer without logging in and without 
being on the internet. 

• You can also use some cool features that 
allow you to turn your screen into a graphical 
paradise. 

• In class some programs were demonstrated 
using Dev-C++ -- such as painting programs, 
tic-tac-toe, and more. 




Where you can get Dev-Cpp... 



• You can get Dev-C++ as free software (under GPL) but also 
offers a CD for purchase . 


• Go to the author’s site to get a list of sites where you can get it: 
Dev-C++ download sites , (http://www.bloodshed.net/dev/devcpp.html) 


• You should let the installer put Dev-C++ in the default directory of 
C:\Dev-Cpp, as it will make it easier to later install add-ons or 
upgrades. 

• I downloaded: 


Dev-C++ 5.0 beta 9.2 (4.9.9.2) (9.0 MB) with Mingw/GCC 3.4.2 



Adding in Graphics Capabilities 



• The graphics functions that we use in examples in this 
course are not automatically part of Dev-C++, so you 
would need to download them at: 

(http://www.uniqueness-template.com/devcpp) 

• qraphics.h (download to C:\Dev-Cpp\include) and 

• libbai.a (download to C:\Dev-Cpp\lib) 


• Then, you must tell Dev-C++ where to find the 
graphics library! 

• First go to the File menu and start a New Project 

• Then, go to the Project menu and select Project 
Options 



• See the next slide 


YOU MUST DO THIS! 


• After you go to the Project menu and select Project 
Options 

• Go to the Parameters tab 

• In the Linker field, enter the following text 



Ibgi 

Igdi32 

lcomdlg32 

luuid 

loleaut32 

lole32 


Click OK 






This is what Dev C++ Looks like 
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graphics, h 
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//Wei some to CS161 

//Let's look at something not guite so complex. ffow about jus t 
/Welcoming to CS161 graphically I We've already seen hov to do thi. 
//on unix, T?ithoLzt any graphics. Not? let's get CS161 splattered 
//a cross the screen / 

// 

finclude "graphics.h" 

# include <math.h> 

# include <iostream> 
using namespace std; 

const int ScreenWidth = 1230; 
const int Sc reenH eight. = 1024; 
const int Start = 10; 


//This is where the real program begins 

int main ( } 

{ 

//Let's establish our graphics vindov 

//A common size is 640x480. . .bet it can be any size you want 
//I am going full screen here., so it will be 1280x1024 

initwindow (ScreenWidth, ScreenHeight } ; 


3etbJccolor (BLUE) ; 
setcolor (RED) ; 

settextstyle (TRIFLEX_FONT, 0, 3) ; 

outtextxy (Start, ScreenHeight/2 , "Welcome to CS161 ! ! 
outtextxy (Start, ScreemHeight/3, "Welcome to CS161 ! ? 
outtextxy (Start, 3creenfieight/3*'2 , "Welcome to CS161 


//let's add a background 


□ □ Compiler Resources []CQ] Compile Log Debug Find Results) 
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The First time, it looks like this 
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Project | Classes | Debug | 


□ □ Compiler | Resources [£Q] Compile Log ^ Debug Find Results 
Ready. 




To Configure Dev-C++... 


• All programming done for CS161 will require separate 

compilation projects. This process is pretty easy as long as 
you know what goes where, which we will show in class and 
demonstrate here in these slides. 


• The first time you use Dev-C++ you will need to 
configure it so that it will allow you to more easily get 
your work done and allow you to perform computer 
graphics, if you so desire. 

• Go to the Tools menu and select Compiler Options 



In the Settings tab, click on Linker in the left panel and 
change Generate debugging information to Yes 


Click OK 


Compiler Options under Tools 






To Create a new Project 



• Think of a project as a container used to store all of the pieces 
needed to compile a program 

• Go to the File menu and select New and then Project 

• Choose Empty Project unless you use one of the projects I have 
posted on my website, make sure C++ project is selected 

• This is also where you will give your project a name. 

• If you reuse a project, you essentially will write over whatever was 
there, so you will probably want to start with a fresh project name. 
The name of your project will also be the name of your 
executable. 


• Once you have entered a name of your project, click OK 

• Dev-C++ will then ask you where you want to save your file 


Make it a C++ Empty Project 


Select Empty Project 
Select C++ Project 
I checked “Make Default Language 
Click OK 


New project 


Basic 


MultiMedia | Introduction 



Windows Console Static Library 

Application Application 


DLL Empty Project 


Description: 

An empty project 


Project options: 
Name: 

| Project3 


C C Project (* C++ Project 

F Nake Default Language^ 


Ok X Cancel ^ Help 




Add Source Files 


• Here are some ways to add source files 

Go to the File menu and select New Source 
File 

Or, go to the Project menu and select New 
File 

I like to go to the green + symbol which 
allows me to add files to this project; you 
can use it to add one of the examples that 
has been posted on our website 


After opening a new file. . . 




Opening a Demonstration Program 



• To open one a file, go to the Project 
menu and select Add to Project 

• Or, right click on the project name in the 
left-hand panel and select Add to Project 

• Make sure when you are adding a 
project, that it has a .cpp extension. 

• You can see the contents of the file in 
the large window by clicking on the name 
in the left-hand panel 
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Happy Face.cpp 


[//This program displays a simple happy face. . . 

//The key piece of this program is that it gives us an example of 
//hov to get started^ and have alittle fun while do so! 

//You always need to include the i os t ream library 

//Those of you playing wi th graphics on your PC 1 s and Dew C++ 

//also need to include graphics. h 

ft in c lude n gr aphi c s . h w 
ftinclude <io3tream> 

using najnespa.ee std; 

//This is vhere the program really Begins/ 

int main ( ) 

{ 

//Ctart by deciding aBont the size of your graphics vindov 
ini twin dow (500 , 500) ; open a graphics window 

//Before drawing f we need to set a color 

setcolor (RED) ; 

outtextxy (50 r 5Q r n Now f this is starting to get f un . . . . n ) ; 

//We begin the happy face wi th circles tor the eyes and nose 

circle (220 r 185 r 20) ; 
circle (275, 135 r 20) ; 
setcolor (BLUE) ; 
circle (250, 220, 10) ; 

// nov the month 

setcolor (RED) ; 

arc (250,250,190,350,75) ; 

//now the face 


S3 Compiler Resources rfftl Compile Loo I Debua 1 & Find Results 


To Compile a Program 


• Once you have either entered in a 
program or opened one of the 
demonstration files, 

It is time to compile and run the program 
Go to the Execute menu and select Compile 
Instead, I use: control key F9 
Errors will display at the bottom window 


Running the program! 


I 

• If there were no errors, you will get in this 
case both a 

graphics window and a console window: 






Placing graphics. h in the package 
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Jit Examples 
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Rles of type: | All files (V) 


C:\Dev-Cpp\Makefile.wi 


[Linker error] undefined reference to 'circle' 
[Linker error] undefined reference to ’setcolor' 
[Linker error] undefined reference to 'circle' 
[Linker error] undefined reference to 'setcolor' 
[Linker error] undefined reference to 'arc' 

[Linker error] undefined reference to 'setcolor' 
[Linker error] undefined reference to 'circle' 
[Linker error] undefined reference to 'closegraph' 
Id returned 1 exit status 
[Build Error] [Project1.exe] Error 1 


File Edit Search 


Project Execute Debug Tools CVS Window 


C:\Dev-Cpp\Makefile. win 


[Linker error] undefined reference to 'setcolor' 
[Linker error] undefined reference to 'circle' 
[Linker error] undefined reference to 'setcolor' 
[Linker error] undefined reference to 'arc' 

[Linker error] undefined reference to 'setcolor' 
[Linker error] undefined reference to 'circle' 
[Linker error] undefined reference to 'closegraph' 
Id returned 1 exit status 
[Build Error] [Project! .exe] Error 1 
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I like to put the graphics.h 
library in the project, so that I 
can see a summary of the 
functions available 

So, go back to the green + 
symbol and select 
graphics.h from the 
include directory 

From the include directory, 
select graphics.h: 



Select ....you’ll see this.... 






Notice the graphics. h in the left-hand 
window under the name of the project: 
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Project | Classes | Debug | 
B {p Projectl 


Happy Face.cpp graphics.h | 


graphics, h 
| Happy Face.cpp 


// Grant Macklem (Grant, 

// Gregory Schmelter (G: 

// Ivan Stashak (Ivan. Si 

// Michael Main (Mic 

// CSCI 4830/7818: API Prc 
ty of Colorado 


lem(?colorado. 


Colorado . edu) 
col orado.edu) 


Boulder, Spring 2003 


a 


// * This library is still under development. 

// * P lease see http://vvv.cs.colorado.edu/-~main/bgi for informc 
// * using this library vith the mingv32 g++ compiler. 

// * This library only vorks vith Windovs API level 4.0 and higi 
// * This library may not be compatible vith 64-bit versions of 


windovs 


and Include Directives 


♦ ifndef WINBGI_H 
♦define WINBGI_H 
♦include <windows.h> 
♦include <limits.h> 
♦include <sstream> 


// Provides the mouse 
// Provides INT_MAX 
// Provides std: :ostr: 




□□ Compiler | ^ Resources | (£Q] Compile Log | Debug | F 
37: 51 (insert |363 Lines in file 


By Clicking on the graphics.h 
file name in the left-hand 
window, that file is displayed 
now in the large window. 

Don’t modify this file! 


Compile again... 


• Every time you fix errors or change your 

program, you will need to compile again 

Go to the Execute menu and select Compile 

Or use: control key F9 

Errors will display at the bottom window 

I made a couple of typos ... so you could 
see what it would look like 


L 


Oil □ ■ ® « 1 3 


p 

p 

p 


««l® 

□ □ 

□ □ 

B 

□ 

□ □ 

□ □ 

f © 

|^New reinsert ^Toggle [0] Goto 


File Edit Search View Project Execute Debug Tools CVS Window Help 


nr 


Project Classes | Debug 


y Projectl 

graphics, h 
Happy Face.cpp 


0 


Happy Face.cpp graphics. h 1 


circle (275,135,20) ; 
setcolor (BLUE) ; 
circle (250,220,10) ; 

// nov the month 

setcolor (E£ED) ; 

arc (2 50,2 50,190,350,75) ; 


//nov the race 

setcolor (WHITE) ; 
circle (250,250,100); 
while ( ! Idohit ( ) ) ; 


Veit for user to press a £ey 


//I added these tvo lines of code and made a couple of typo si 

coot « n Are you having fun yet? n «end 


coot « w Kit enter when you are done; 1 


cin.get(); "Ve are done 

//close graphics vindov 


closegraph ( 

return 0; 


□ □ Compiler Resources | [£Q] Compile Log | ^ Debug Find Results t{|| Close 
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Message 


C:\Dev-Cpp\Happy Face.cpp 

In function "int main()': 

39 

C:\Dev-Cpp\Happy Face.cpp 

"end 1 undeclared (first use this function) 

(Each undeclared identifier is reported only once for each function it appears in.) 

39 

C:\Dev-Cpp\Happy Face.cpp 

expected before "cout" 


C:\Dev-Cpp\Makefile.win 

[Build Error] ["Happy Face.o"] Error 1 







When we get error messages 



Many times, in C and C++ when we get errors, 
the errors actually occur on the line above 

When a compiler encounters something 
unexpected, it tries to correct the situation, but 
typically by the next line it can’t resolve it and 
gives an error 

Sometimes the error messages are 
relevant... but sometimes they are not. 

Notice the error occurs in this case on the line 
above the highlighted line 

I mis-typed end (forgot the lower case L after) 

I forgot a semicolon! 


• If you run your program, you may notice 
the console window flashes (or maybe 
you don’t even see it), or the graphics 
window flashes up and goes away 

• You will need to add, at the end, code to 
ask the user to hit enter ... to pause the 
system until the user is ready, for both 
the graphics window and console 
window 



• The console window is where all input 
and output occurs that is normal in C++ 

• If you say cout « “blablabla”; it will go to 
the console window 

• Most input from the keyboard works with 
the console window 

• Any use of cout or cin works with the 
console window... in the same way as v 



will learn in unix 



Graphics Window 


r\ 


• The graphics window is where all 
drawing will occur 

• cin/cout do not work in the graphics 
window 

• We can easily do some basic input, 

Single character input from the keyboard 
Mouse input 


At the end of All Programs 


At the end of all programs you will want 
the following: 

For managing the console window: 

cout «“Press ENTER to continue...” «endl; 
cin.get(); 

For managing the graphics window: 

(you don’t have to do this if you also do the above) 

outtext(“Hit any Key when Done”); 

hIX 




So, the form of all programs is 





• Initialize the graphics window 


(the maximum width is usually 1024x768 or 1280x1024) 


initwindow(width, height); 

• Clearing the graphics window... 

cleardevice(); 

• Delay the program, so that users can see 

what is happening.. . sending in the number of msec 

delay(milliseconds); 

• Wait for a keyboard hit: 



or, kbhit(); 



Setting Graphics Attributes.... 


• Set Drawing Color (for lines and edges) 



(colors typically range from 0-15; 0 is usually black and 15 is white) 


setcolor(color); 

• Set Background Color (usually for text) 

setbkcolor(color); 

• Set Fill Style and Color (for interiors) 

Pattern 0-12, 0 = empty, 1 = solid 

setfillstyle(pattem, color) 

• Set Line Style and Thickness 

Style: 0 = solid, 1 = dotted, 3 = dashed 
Thickness is the width in terms of pixels 

setlinestyle(style, pattern, thickness) 





• Origin on graphics system is Upper Left 

So, positive y values move DOWN 

X, Y coordinate data are always whole 
numbers 

• Setting the Current Position 

Move to a current position (x,y are whole numbers) 

moveto(x,y); 

Move relative to the current position 
moverel(x,y); 




• Drawing a line 

Drawing from Current Position (from current 

position to the specified coordinate) 

lineto(x,y); 

Drawing relative (a delta amount from the current position) 
The delta amounts would be whole numbers 

linerel(deltax,deltay); 

Drawing absolute (from one coordinate to another) 

linerel(from_x, from y, to_x, to_y); 


• Drawing a Circle 

Given center and radius as whole numbers 
circle (center_x, center_y, radius); 

• Drawing a filled Rectangle 

(given upper left and lower right corners) 

bar(ul_x, ul_y, I r_x , I r_y ) ; 

• Drawing an unfilled Rectangle 

(given upper left and lower right corners) 

rectangle(ul_x, ul_y, lr_x, lr_y); 


• Text Formatting 

Set the justification 

• Horizontal: (0 = left, 1 = center, 2= right) 

• Vertical: (0 = bottom, 1 = center, 2 = top) 

settextjustify(horizontal, vertical) 

Set the text style 

• Font: (0-11) 

• Direction: 0 = left to right direction 

• Character Size: 0 = normal, 6 is really big! 



settextstyle(font, direction, character size) 





• Text Output 

Set Text color (index ranges 0-15) 
setcolor(index); 

Output a message on the graphics window 
at the current position 

outtextfmessages on graphics window”); 

Output a message on the graphics window 
at the given x,y coordinate 

outtextxy(x,y, ’’message”); 




• Has there been a mouse click? 

Right Click is 513 

Left Click is 516 Middle Click is 519 (the wheel...) 

answer = ismouseclick(kind) 

• Clear the mouse click 


(if you don’t do this you can’t get the next mouse click!) 

clearmouseclick(kind); 

What was the coordinate when the 
mouse click happens... 

x = mousexQ; y = mouseyQ; 


